<template>
  <div class="app-container">
    <el-form ref="addForm" :rules="rules" :model="addData" label-position="left" label-width="90px" style="width: 90%; margin-left:50px; min-height: 700px">
      <el-form-item label="分类标题" prop="title">
        <el-input v-model="addData.title" style="width: 380px;" />
      </el-form-item>
      <el-form-item label="分类上级" prop="category_id">
        <el-input v-model="addData.category_id" style="width: 380px;" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogAddVisible = false">
        Cancel
      </el-button>
      <el-button type="primary" @click="handleAddSubmit()">
        Confirm
      </el-button>
    </div>
  </div>
</template>

<script>
import { nodeCategoryAdd, nodeCategoryDetail } from '@/api/node'
import waves from '@/directive/waves' // waves directive

export default {
  name: 'NodeCategoryAdd',
  components: { },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      currentAction: 'add',
      addData: {
        id: 0,
        title: '',
        parent_id: ''
      },
      rules: {
        title: [{ required: true, message: '需要填写标题', trigger: 'blur' }],
        parent_id: [{ required: true, message: '需要选择分类上级', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.resetAddData()
    this.addData.Id = this.$route.params.id
    nodeCategoryDetail(this.addData.Id).then((response) => {
      if (response.success) {
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    resetAddData() {
      this.addData = {
        id: 0,
        title: '',
        parent_id: ''
      }
    },
    handleAddSubmit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          nodeCategoryAdd(this.addData).then((response) => {
            if (response.success) {

            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
